<!DOCTheYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>浮动</title>
		<style type="text/css">
			*{
		 	margin:0;
		 	padding:0;
		 	}
		 	.box{
		 		width: 200px;
		 		height: 230px;
		 		border: 1px solid black;
		 		font-size: 36px;
		 		text-align: center;
		 		float:left;/*左浮动*/
		 		/*float:left   有浮动*/
		 	}
		 	.bufu{
		 		width: 300px;
		 		height: 300px;
		 		background-color: pink;
		 	}
		 	/*.clear{
		 		clear: both;
		 	}*/
		 	/*.fu{
		 		overflow：hidden;
		 	}*/
		 	.clearfix::after{
		 		conten:"";
		 		display: block;
		 		height: 0;
		 		color: both;
		 		visibility: hidden;
		 	}
		 	/*添加双伪元素*/
		 	.clearfix::after,.clearfix::before{
		 		content: "";
		 		display: table;
		 	}
		 	.clearfix::after{
		 		clear: both;
		 	}
		</style>
	</head>
	<body>
		<!--<!传统的网页布局：标准流+浮动+定位
		标准流:标签的显示规则(显示模式)
		浮动:让块级盒子在一行内显示
		定位:实现标签在网页中精准定位-->
		<!--浮动float:
			1.浮动的盒子会脱离标准流（脱标）
			清除浮动的方法：
			1额外标签法：隔墙法
			2.父级添加overflow：hidden属性
			3.添加after伪元素
			4.父级添加双伪元素
		-->
		<div class= "clearfix">
		<div class="box">1</div>
		<div class="box">2</div>
		<div class="box">3</div>
		
		<!--<p class="clear"></p>额外标签法-->	
		<div class="bufu"></div>
	</body>
</html>
